<template>
  <div class="com_m">
    <div class="border_btm">
      <h4 class="left">发表评论</h4>
    </div>

    <!-- 输入框 -->
    <van-cell-group>
      <van-field v-model="postComInfo.content" placeholder="请输入评论内容" />
    </van-cell-group>
    <van-button type="info" class="publish" @click="goPostComment">发表评论</van-button>

    <!-- 评论数据 -->
    <div class="com_text" v-show="isCommentText">
      <ul>
        <li v-for="(item, index) in commentsText" :key="index">
          <div class="title commom_c">
            <span>第{{index + 1}}楼</span>
            <span>用户：{{item.user_name}}</span>
            <span>发表时间：{{$moment(item.add_time).format('YYYY-MM-DD')}}</span>
          </div>
          <div class="commom_c content">{{item.content}}</div>
        </li>
      </ul>
    </div>

    <!-- 加载更多 -->
    <van-button plain type="warning" class="go_more" @click="loadMore">加载更多</van-button>
  </div>
</template>

<script>
import { getCommentList, postComment } from "../../api/index";
export default {
  data() {
    return {
      // 评论显示开关
      isCommentText: false,

      // 评论内容数组
      commentsText: [],

      // 获取评论要传的数据
      goInfo: {
        artid: '',
        pageindex: ''
      },

      // 提交评论要传的数据
      postComInfo: {
          artid: 0,
          content: ''
      }
    };
  },
  props: ["imgId", "page"],
  methods: {
    async getCmtList() {
      this.goInfo.artid = Number(this.imgId);
      this.goInfo.pageindex = Number(this.page);
      const { data:res } = await getCommentList(this.goInfo);
      // console.log(res, 99999);
      if (res.message.length > 0) this.isCommentText = true
      this.commentsText = res.message
    },

    // 加载更多按钮
    loadMore() {
        this.$emit('addPage')
        this.getCmtList()
    },

    // 提交评论按钮
    async goPostComment() {
        this.postComInfo.artid = Number(this.imgId)
        // console.log(this.postComInfo, '评论框输入的内容')
        const {data:res} = await postComment(this.postComInfo)
        // console.log(res, 65659779)
        if(res.status !== 0) {
            this.$toast('评论提交失败');
            return
        }else{
          this.$toast('评论成功');
          this.getCmtList();
        }
        this.postComInfo.content = ''
    }
  },
  created() {
    this.getCmtList();
  }
};
</script>

<style lang="less" scoped>
.com_m {
  margin-top: 20px;
}

.left {
  float: left;
}

.border_btm {
  height: 40px;
  border-bottom: 1px solid #aaa;
}

.van-cell-group {
  margin-top: 8px;
  margin-bottom: 5px;
  height: 100px;
  border: 1px solid #ccc;
}

.publish {
  width: 100%;
  // margin: 0 5px;
}

.com_text {
  margin-top: 5px;
}

.title {
  background-color: #ccc;
  span {
    float: left;
    margin-right: 5px;
  }
}

.commom_c {
  height: 30px;
  font-size: 12px;
  line-height: 30px;
}

.content {
  text-align: left;
  text-indent: 20px;
}

.go_more {
  margin-top: 10px !important;
  width: 100%;
}
</style>